import { useState } from 'react';
import moment from 'moment';
import { Table, Modal, Button } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import Paginations from '../AssignedTaskModal/Paginations';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { afterOperation, clickRow } from '../../utils';
import { removeFutureAssign } from '../../service';
import '../AssignedTaskModal/index.less';

export default observer((props: any) => {
  const { dataSource, visible, $visible, getList, pageData, $list, loading, $pageData } = props;
  const [selectedRowKeys, $selectedRowKeys] = useState([]);
  const columns = [
    {
      title: getMessage('processCenter.processName'),
      dataIndex: 'processName',
      ellipsis: true,
    },
    {
      title: getMessage('processCenter.assigner'),
      dataIndex: 'attorneyName',
    },
    {
      title: getMessage('processCenter.starttime'),
      dataIndex: 'startTime',
      ellipsis: true,
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: getMessage('processCenter.endTime'),
      dataIndex: 'endTime',
      ellipsis: true,
      render: (text) => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];
  const queryList = (page: number, pageSize: number) => {
    $selectedRowKeys([]);
    getList(page, pageSize, '2', '', {
      processGroupName: '',
      processDefId: '',
      date: '',
      status: '',
    });
  };

  const removeAssignItems = () => {
    if (selectedRowKeys.length == 0) {
      Modal.info({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.selectRecord'),
        okText: getMessage('processCenter.known'),
      });
    } else {
      Modal.confirm({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.confirmToremove'),
        okText: getMessage('global.sure'),
        cancelText: getMessage('global.cancel'),
        onOk: () => {
          const params = new FormData();
          params.append('assignId', selectedRowKeys.join(','));

          removeFutureAssign(params).then((res) => {
            afterOperation({ ...res, message: getMessage('global.delete') }, () => {
              queryList(1, pageData.pageSize);
            });
          });
        },
      });
    }
  };

  const onChange = (selectedRowKeys) => {
    $selectedRowKeys(selectedRowKeys);
  };

  return (
    <Modal
      title={getMessage('processCenter.willAssign')}
      className="futureAssign"
      onCancel={() => {
        $visible(false);
        $list([]);
        $pageData({
          pageIndex: 1,
          pageSize: 50,
          total: 0,
        });
        $selectedRowKeys([]);
      }}
      centered
      footer={null}
      destroyOnClose
      visible={visible}
    >
      <Button onClick={removeAssignItems} style={{ marginBottom: 10 }}>
        <InbizIcon type="icon-shanchu-h" style={{ marginRight: 5 }} />
        <TextWidget>global.delete</TextWidget>
      </Button>
      <Table
        loading={loading}
        dataSource={dataSource}
        columns={columns}
        rowKey="id"
        rowSelection={{
          onChange,
          selectedRowKeys,
          type: 'radio',
        }}
        onRow={(record) => {
          return {
            onClick: () => clickRow(record, { onChange, selectedRowKeys }, false),
          };
        }}
        scroll={{ y: 235 }}
        pagination={false}
      />
      {dataSource.length > 0 && <Paginations pageData={pageData} queryList={queryList} />}
    </Modal>
  );
});
